<template>
  <div class="common-slider-container">
    <!-- 减少按钮 -->
    <div class="slider-control-btn" @click="decrease">
      <img :src="decreaseIcon" alt="减少" />
    </div>
    <!-- 滑块 -->
    <div class="slider-wrapper">
      <el-slider
        v-model="internalValue"
        :min="min"
        :max="max"
        :step="step"
        :show-tooltip="false"
      />
    </div>
    <!-- 增加按钮 -->
    <div class="slider-control-btn" @click="increase">
      <img :src="increaseIcon" alt="增加" />
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import decreaseIcon from '@/assets/icons/icon_common_slider_decrease.png'
import increaseIcon from '@/assets/icons/icon_common_slider_increase.png'

// 定义 props
const props = defineProps({
  // 当前值
  modelValue: {
    type: Number,
    required: true
  },
  // 最小值
  min: {
    type: Number,
    default: 0
  },
  // 最大值
  max: {
    type: Number,
    default: 500
  },
  // 步长
  step: {
    type: Number,
    default: 1
  }
})

// 定义 emits
const emit = defineEmits(['update:modelValue'])

// 内部值，用于双向绑定
const internalValue = ref(props.modelValue)

// 监听外部值变化
watch(() => props.modelValue, (newVal) => {
  internalValue.value = newVal
})

// 监听内部值变化
watch(internalValue, (newVal) => {
  emit('update:modelValue', newVal)
})

// 减少值
const decrease = () => {
  if (internalValue.value > props.min) {
    internalValue.value = Math.max(props.min, internalValue.value - props.step)
  }
}

// 增加值
const increase = () => {
  if (internalValue.value < props.max) {
    internalValue.value = Math.min(props.max, internalValue.value + props.step)
  }
}
</script>

<style lang="scss" scoped>
@import '@/style/element-overrides.scss';

.common-slider-container {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: 14px;
  width: 100%;
  
  // 控制按钮
  .slider-control-btn {
    width: 13px;
    height: 13px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    flex-shrink: 0;
    
    &:hover {
      background: rgba(0, 255, 244, 0.1);
      border-color: rgba(0, 255, 244, 0.8);
    }
    
    &:active {
      background: rgba(0, 255, 244, 0.2);
    }
    
    img {
      width: 13px;
      height: 13px;
    }
  }
  
  // 滑块容器
  .slider-wrapper {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
  }
}
</style>